<template>
  <div>
    <!--外边灰框-->
    <div
        style="width: 1300px;background-color: whitesmoke;border: 1px; padding: 40px;border-radius: 20px;margin: 0 auto 30px;">
      <el-row style="background-color: whitesmoke;height:40px">
        <el-breadcrumb separator="/" style="margin-left: 10px">
          <el-breadcrumb-item :to="{ path: '/' }"><a href="/home">首页</a></el-breadcrumb-item>
          <el-breadcrumb-item>科普视频</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <p>科普视频</p>


      <!--遍历视频-->
      <div style="display: flex; justify-content: center; align-items: center">
        <el-row :gutter="24">
          <el-col :span="6" v-for=" item in videoTap">
            <div class="grid-content" style="position: relative;overflow: hidden">
              <el-card class="box-card" style="width: 240px;height: 220px;margin-bottom: 10px">
                <a :href=item.videoUrl style="color: #4a4a4a">
                  <img :src=item.coverUrl style="width: 200px;height: 140px" class="grid-content-img">
                  <hgroup>
                    <video :src=item.videoUrl type="video/mp4" style="width: 200px;height: 200px;" class="clip" loop muted autoplay></video>
                  </hgroup>
                  <p style="text-align: center;font: 15px '微軟正黑體 Light'">{{ item.title }}</p>
                </a>

              </el-card>

            </div>
          </el-col>
        </el-row>
      </div>


      <templpate>
        <div style="display: flex; justify-content: center; align-items: center;">
          <el-pagination
              @current-change="changePage"
              hide-on-single-page
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
              :current-page="currentPage">
          </el-pagination>
        </div>
      </templpate>
    </div>


  </div>
</template>
<style>
.grid-content hgroup{
  position: absolute;
  top: -250px;
  transition: all 0.5s ease-in 0s;
}.grid-content :hover hgroup{
   background-color: white;
  position: absolute;
  top: 15px;
  transition: all 0.5s ease-in 0s;
}
/*头部第一行*/
.a {
  text-decoration: none;
  color: #4a4a4a;
}

/*整体*/
body {
  margin: 0 auto;
  padding: 0;
}
.el_row_span > a {
  text-align: center;
  text-decoration: none;

  font: 15px "微软雅黑 Light";
  line-height: 50px;
  margin: 0 5px 0 5px;
  display: inline-block;
  color: #4a4a4a;
}

/*主题样式*/
body {
  margin: 0 auto;
  padding: 0;
}

.div_li {
  float: left;
  margin-right: 100px;
  margin-bottom: 20px;
  font: 15px "微软雅黑 Light";
}

p {
  font: 18px "微软雅黑";
}

.div_p {
  color: white;
  margin: 70px 30px
}


.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #00cb8e;
  color: #00cb8e;
}
</style>

<script>
import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";
import SimpleAxios from "@/http/SimpleAxios";

export default {
  data() {
    return {
      activeTab: "5",
      videoTap: [],
      currentPage: 1,
      pageSize: 0,
      total: 0,
    }
  },
  methods: {
    changePage(page) {

      this.$router.replace('?page=' + page);
      this.loadVideoList();
    },
    loadVideoList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = BaseUrl.INDEX + '/video/listVideo?page=' + page;
      console.log('url = ' + url);

      SimpleAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state === 20000) {
          this.currentPage = jsonResult.data.pageNum;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
          this.videoTap = jsonResult.data.list;
          console.log(this.videoTap);
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  created() {
  },
  mounted() {
    this.loadVideoList()
  }
}
</script>